<template>
	<common-page>
		<headerNav></headerNav>
		<common-banner :banner="banner"></common-banner>
		<common-content-wrapper>
			<round-card>
				<common-tabs :active="current" :tabs="tabs" @change="v => (current = v)"></common-tabs>

				<!-- 列表显示区域  -->
				<common-list-content>
					<view class="mt-5" v-for="item in items" :key="item.id">
						<list-item-image :image="item.thumbimage" :title="item.name" @tap="() => handleItemClick(item.id)">
							<view class="border-b border-b-solid border-b-gray">
								<view class="flex my-2" v-for="tag in item.tags" :key="item.id + '-' + tag.title">
									<view
										class="bg-red text-white text-sm tag"
										:style="{ color: tag.color, backgroundColor: tag.rim_color }"
									>
										{{ tag.title }}
									</view>
									<text class="ml-1 text-xs">{{ tag.intro }}</text>
								</view>
								<view class="my-2 flex item-end">
									<text class="text-xs text-red sub">¥</text>
									<view>
										<text class="text-base text-red">{{ item.price }}.00</text>
										<text class="text-xs" v-if="0 === current">/月</text>
									</view>
								</view>
							</view>
						</list-item-image>
					</view>
				</common-list-content>
			</round-card>
		</common-content-wrapper>
	</common-page>
</template>

<script>
import categoryMixin from '@/mixins/common-category-mixin.js'
import headerNav from '@/components/layout/headerNav.vue'
export default {
	mixins: [categoryMixin],
	components: {
		headerNav
	},
	methods: {
		handleItemClick(id) {
			uni.navigateTo({
				url: '/pages/land/land-detail?id=' + id
			})
		}
	}
}
</script>

<style scoped>
/* 	.banner {
		height: 300rpx;
		background-color: #aaa;
	} */

/* 	.list-content {
		padding-left: 32rpx;
		padding-bottom: calc(env(safe-area-inset-bottom) + 128rpx);
	} */

.tag {
	width: 30rpx;
	height: 30rpx;
	text-align: center;
	line-height: 30rpx;
}

.sub {
	line-height: 2em;
}
</style>
